<template>
  <div class="user-profile">
    <el-row :gutter="20">
      <!-- 左侧用户信息卡片 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card class="profile-card">
          <div class="profile-header">
            <el-avatar :size="80" :src="userInfo.avatar">
              {{ userInfo.name?.charAt(0) }}
            </el-avatar>
            <div class="profile-info">
              <h3 class="username">{{ userInfo.name }}</h3>
              <p class="user-id">ID: {{ userInfo.id }}</p>
              <div class="rating-info">
                <el-rate 
                  v-model="userInfo.rating" 
                  disabled 
                  show-score 
                  text-color="#ff9900"
                  score-template="{value}"
                  :max="5"
                  :show-text="false"
                />
                <span class="rating-text">{{ userInfo.rating }}分</span>
              </div>
            </div>
          </div>
          
          <div class="profile-stats">
            <div class="stat-item">
              <div class="stat-number">{{ userInfo.stats?.completed || 0 }}</div>
              <div class="stat-label">已完成委托</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ userInfo.stats?.published || 0 }}</div>
              <div class="stat-label">发布委托</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ userInfo.stats?.earned || 0 }}</div>
              <div class="stat-label">累计收入(元)</div>
            </div>
          </div>
          
          <div class="profile-actions">
            <el-button type="primary" @click="handleEditProfile">
              <el-icon><Edit /></el-icon>
              编辑资料
            </el-button>
            <el-button @click="handleViewQRCode">
              <el-icon><QrCode /></el-icon>
              我的二维码
            </el-button>
          </div>
        </el-card>
      </el-col>
      
      <!-- 右侧功能区域 -->
      <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
        <!-- 快捷功能 -->
        <el-card class="function-card">
          <template #header>
            <div class="card-header">
              <span>快捷功能</span>
            </div>
          </template>
          
          <div class="function-grid">
            <div class="function-item" @click="handleMyPublished">
              <el-icon class="function-icon"><Document /></el-icon>
              <div class="function-content">
                <div class="function-title">我的发布委托</div>
                <div class="function-count">{{ userInfo.stats?.published || 0 }}个</div>
              </div>
              <el-icon class="arrow-icon"><ArrowRight /></el-icon>
            </div>
            
            <div class="function-item" @click="handleMyAccepted">
              <el-icon class="function-icon"><Check /></el-icon>
              <div class="function-content">
                <div class="function-title">我的接受委托</div>
                <div class="function-count">{{ userInfo.stats?.accepted || 0 }}个</div>
              </div>
              <el-icon class="arrow-icon"><ArrowRight /></el-icon>
            </div>
            
            <div class="function-item" @click="handleMyRates">
              <el-icon class="function-icon"><Star /></el-icon>
              <div class="function-content">
                <div class="function-title">我的评价</div>
                <div class="function-count">{{ userInfo.stats?.rates || 0 }}条</div>
              </div>
              <el-icon class="arrow-icon"><ArrowRight /></el-icon>
            </div>
            
            <div class="function-item" @click="handleMyFavorites">
              <el-icon class="function-icon"><StarFilled /></el-icon>
              <div class="function-content">
                <div class="function-title">我的收藏</div>
                <div class="function-count">{{ userInfo.stats?.favorites || 0 }}个</div>
              </div>
              <el-icon class="arrow-icon"><ArrowRight /></el-icon>
            </div>
          </div>
        </el-card>
        
        <!-- 最近活动 -->
        <el-card class="activity-card">
          <template #header>
            <div class="card-header">
              <span>最近活动</span>
              <el-button type="primary" link @click="handleViewAllActivities">
                查看全部
              </el-button>
            </div>
          </template>
          
          <div class="activity-list">
            <div 
              v-for="activity in recentActivities" 
              :key="activity.id"
              class="activity-item"
            >
              <div class="activity-icon">
                <el-icon :class="getActivityIconClass(activity.type)">
                  <component :is="getActivityIcon(activity.type)" />
                </el-icon>
              </div>
              <div class="activity-content">
                <div class="activity-title">{{ activity.title }}</div>
                <div class="activity-time">{{ formatTime(activity.time) }}</div>
              </div>
              <div class="activity-status">
                <el-tag :type="getActivityStatusType(activity.status)" size="small">
                  {{ getActivityStatusText(activity.status) }}
                </el-tag>
              </div>
            </div>
            
            <el-empty v-if="recentActivities.length === 0" description="暂无活动记录" />
          </div>
        </el-card>
        
        <!-- 设置选项 -->
        <el-card class="settings-card">
          <template #header>
            <div class="card-header">
              <span>设置</span>
            </div>
          </template>
          
          <div class="settings-list">
            <div class="setting-item" @click="handleNotificationSettings">
              <el-icon><Bell /></el-icon>
              <span>通知设置</span>
              <el-icon><ArrowRight /></el-icon>
            </div>
            
            <div class="setting-item" @click="handlePrivacySettings">
              <el-icon><Lock /></el-icon>
              <span>隐私设置</span>
              <el-icon><ArrowRight /></el-icon>
            </div>
            
            <div class="setting-item" @click="handleHelpCenter">
              <el-icon><QuestionFilled /></el-icon>
              <span>帮助中心</span>
              <el-icon><ArrowRight /></el-icon>
            </div>
            
            <div class="setting-item" @click="handleAbout">
              <el-icon><InfoFilled /></el-icon>
              <span>关于我们</span>
              <el-icon><ArrowRight /></el-icon>
            </div>
            
            <div class="setting-item logout-item" @click="handleLogout">
              <el-icon><SwitchButton /></el-icon>
              <span>退出登录</span>
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Edit, QrCode, Document, Check, Star, StarFilled, ArrowRight,
  Bell, Lock, QuestionFilled, InfoFilled, SwitchButton
} from '@element-plus/icons-vue'

/**
 * 个人中心页面组件
 * @description 显示用户个人信息、统计数据、快捷功能等
 */
const router = useRouter()

// 用户信息
const userInfo = ref({
  id: 'U123456',
  name: '学生小明',
  avatar: '',
  rating: 4.3,
  stats: {
    completed: 28,
    published: 12,
    accepted: 8,
    rates: 20,
    favorites: 5,
    earned: 156
  }
})

// 最近活动
const recentActivities = ref([
  {
    id: 1,
    type: 'publish',
    title: '发布了委托"代取快递"',
    time: '2023-11-30T10:30:00Z',
    status: 'pending'
  },
  {
    id: 2,
    type: 'accept',
    title: '接受了委托"代买午餐"',
    time: '2023-11-29T15:20:00Z',
    status: 'completed'
  },
  {
    id: 3,
    type: 'rate',
    title: '评价了委托"打印资料"',
    time: '2023-11-28T14:10:00Z',
    status: 'completed'
  }
])

/**
 * 获取活动图标
 * @param {string} type - 活动类型
 * @returns {string} 图标名称
 */
const getActivityIcon = (type) => {
  const iconMap = {
    'publish': 'Document',
    'accept': 'Check',
    'rate': 'Star',
    'complete': 'CircleCheck'
  }
  return iconMap[type] || 'InfoFilled'
}

/**
 * 获取活动图标样式类
 * @param {string} type - 活动类型
 * @returns {string} 样式类名
 */
const getActivityIconClass = (type) => {
  const classMap = {
    'publish': 'icon-publish',
    'accept': 'icon-accept',
    'rate': 'icon-rate',
    'complete': 'icon-complete'
  }
  return classMap[type] || 'icon-default'
}

/**
 * 获取活动状态类型
 * @param {string} status - 活动状态
 * @returns {string} 标签类型
 */
const getActivityStatusType = (status) => {
  const typeMap = {
    'pending': 'info',
    'in_progress': 'warning',
    'completed': 'success',
    'cancelled': 'danger'
  }
  return typeMap[status] || 'info'
}

/**
 * 获取活动状态文本
 * @param {string} status - 活动状态
 * @returns {string} 状态文本
 */
const getActivityStatusText = (status) => {
  const textMap = {
    'pending': '待处理',
    'in_progress': '进行中',
    'completed': '已完成',
    'cancelled': '已取消'
  }
  return textMap[status] || '未知'
}

/**
 * 格式化时间显示
 * @param {string} timeStr - 时间字符串
 * @returns {string} 格式化后的时间
 */
const formatTime = (timeStr) => {
  const now = new Date()
  const time = new Date(timeStr)
  const diff = now - time
  
  const minutes = Math.floor(diff / (1000 * 60))
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  
  if (minutes < 60) {
    return `${minutes}分钟前`
  } else if (hours < 24) {
    return `${hours}小时前`
  } else {
    return `${days}天前`
  }
}

/**
 * 处理编辑资料
 */
const handleEditProfile = () => {
  router.push('/campus-entrust/profile/edit')
}

/**
 * 处理查看二维码
 */
const handleViewQRCode = () => {
  ElMessage.info('二维码功能开发中...')
}

/**
 * 处理我的发布委托
 */
const handleMyPublished = () => {
  router.push('/campus-entrust/my-published')
}

/**
 * 处理我的接受委托
 */
const handleMyAccepted = () => {
  router.push('/campus-entrust/my-accepted')
}

/**
 * 处理我的评价
 */
const handleMyRates = () => {
  router.push('/campus-entrust/my-rates')
}

/**
 * 处理我的收藏
 */
const handleMyFavorites = () => {
  router.push('/campus-entrust/my-favorites')
}

/**
 * 处理查看全部活动
 */
const handleViewAllActivities = () => {
  router.push('/campus-entrust/activities')
}

/**
 * 处理通知设置
 */
const handleNotificationSettings = () => {
  router.push('/campus-entrust/settings/notification')
}

/**
 * 处理隐私设置
 */
const handlePrivacySettings = () => {
  router.push('/campus-entrust/settings/privacy')
}

/**
 * 处理帮助中心
 */
const handleHelpCenter = () => {
  router.push('/campus-entrust/help')
}

/**
 * 处理关于我们
 */
const handleAbout = () => {
  router.push('/campus-entrust/about')
}

/**
 * 处理退出登录
 */
const handleLogout = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要退出登录吗？',
      '确认退出',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // TODO: 调用退出登录API
    // await logout()
    
    ElMessage.success('退出登录成功')
    router.push('/login')
    
  } catch (error) {
    if (error !== 'cancel') {
      console.error('退出登录失败：', error)
      ElMessage.error('退出登录失败')
    }
  }
}

/**
 * 获取用户信息
 */
const fetchUserInfo = async () => {
  try {
    // TODO: 调用API获取用户信息
    // const res = await getUserInfo()
    // userInfo.value = res.data
    
    console.log('获取用户信息成功')
    
  } catch (error) {
    console.error('获取用户信息失败：', error)
    ElMessage.error('获取用户信息失败')
  }
}

/**
 * 获取最近活动
 */
const fetchRecentActivities = async () => {
  try {
    // TODO: 调用API获取最近活动
    // const res = await getRecentActivities()
    // recentActivities.value = res.data
    
    console.log('获取最近活动成功')
    
  } catch (error) {
    console.error('获取最近活动失败：', error)
    ElMessage.error('获取最近活动失败')
  }
}

// 组件挂载时获取数据
onMounted(() => {
  fetchUserInfo()
  fetchRecentActivities()
})
</script>

<style scoped>
.user-profile {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.profile-card {
  margin-bottom: 20px;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.profile-info {
  flex: 1;
}

.username {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 4px 0;
}

.user-id {
  font-size: 14px;
  color: #909399;
  margin: 0 0 8px 0;
}

.rating-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rating-text {
  font-size: 14px;
  color: #ff9900;
  font-weight: 500;
}

.profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.stat-item {
  text-align: center;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: #409eff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #909399;
}

.profile-actions {
  display: flex;
  gap: 12px;
}

.function-card,
.activity-card,
.settings-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.function-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.function-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.function-item:hover {
  background-color: #e6f7ff;
  transform: translateY(-2px);
}

.function-icon {
  font-size: 24px;
  color: #409eff;
}

.function-content {
  flex: 1;
}

.function-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.function-count {
  font-size: 12px;
  color: #909399;
}

.arrow-icon {
  color: #c0c4cc;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.activity-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.icon-publish {
  background-color: #e6f7ff;
  color: #409eff;
}

.icon-accept {
  background-color: #f0f9ff;
  color: #67c23a;
}

.icon-rate {
  background-color: #fff7e6;
  color: #ff9900;
}

.icon-complete {
  background-color: #f6ffed;
  color: #52c41a;
}

.icon-default {
  background-color: #f5f5f5;
  color: #909399;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-size: 14px;
  color: #303133;
  margin-bottom: 4px;
}

.activity-time {
  font-size: 12px;
  color: #909399;
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.setting-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.setting-item:hover {
  background-color: #e6f7ff;
}

.setting-item span {
  flex: 1;
  font-size: 14px;
  color: #303133;
}

.logout-item {
  background-color: #fff2f0;
  color: #f56c6c;
}

.logout-item:hover {
  background-color: #ffebee;
}

.logout-item span {
  color: #f56c6c;
}

@media (max-width: 768px) {
  .function-grid {
    grid-template-columns: 1fr;
  }
  
  .profile-stats {
    grid-template-columns: 1fr;
  }
  
  .profile-actions {
    flex-direction: column;
  }
}
</style> 